<template>
    <eui-background type="common">
        <eui-nav-bar title="复核任务" color="#fff" />
        <view style="padding: 0 15rpx">
            <view class="flex">
                <eui-search-bar v-model="pickTaskNo" @confirm="searchConfirm" radius="100" leftIcon="icon-saoyisao"
                    @clear="clearSearch()" placeholder="复核任务单号" @clickLeftIcon="clickScanLeft" :focus="true">
                </eui-search-bar>
                <eui-search-bar v-model="code" @confirm="changeGdsPickNum" radius="100" leftIcon="icon-saoyisao"
                    @clear="clearSearch('gds')" placeholder="商品编码/条码" @clickLeftIcon="clickGdsScanLeft">
                </eui-search-bar>
            </view>
        </view>
        <view class="footer" :style="{ height: height + 'px', 'overflow-y': 'auto' }" v-if="!!pickTaskDetail">
            <view class="font-13 bg-white"
                style="margin: 10rpx 15rpx 15rpx 15rpx;padding: 15rpx; padding-top: 0;padding-right: 0;border-radius: 12rpx;">
                <view class="flex just-between">
                    <view style="font-size: 32rpx;font-weight: bold;height: 54rpx;line-height: 54rpx;">
                        订单号: {{ pickTaskDetail.thirdOrderNo }}
                    </view>
                    <view class="picktag" v-if="pickTaskDetail?.reviewTaskStatus">
                        {{ pickTaskDetail.reviewTaskStatus == '0' ? '待复核' : pickTaskDetail.reviewTaskStatus ==
                    '1' ? '复核中' : pickTaskDetail.reviewTaskStatus == '2' ? '已复核' : '' }}
                    </view>
                </view>
                <view class="" style="padding: 8rpx 15rpx 12rpx 0;font-size: 28rpx;">
                    <view class="flex just-between align-center" style="height: 60rpx;">
                        <view>库位 {{ pickTaskDetail.confluenceLocationCode }}</view>
                        <view class="flex">
                            <view class="flex align-center">
                                <view class="flex">
                                    <view class="chnlbox"
                                        :style="{ backgroundColor: getBcmDictItem('chnlType', pickTaskDetail.chnlType)?.color, color: getBcmDictItem('chnlType', pickTaskDetail.chnlType)?.color ? '#fff' : '#000' }"
                                        v-if="getBcmDictName('chnlType', pickTaskDetail.chnlType)">
                                        {{ getBcmDictName('chnlType', pickTaskDetail.chnlType)?.substring(0, 1) }}
                                    </view>
                                    <view class="chnltype"
                                        :style="{ backgroundColor: getBcmDictItem('chnlType', pickTaskDetail.chnlType)?.color, color: getBcmDictItem('chnlType', pickTaskDetail.chnlType)?.color ? '#fff' : '#000' }"
                                        v-else>
                                        {{ getBcmDictName('chnlType', pickTaskDetail.chnlType) }}
                                    </view>
                                    <view v-if="!!pickTaskDetail.thirdOrderIndex"
                                        style="font-size: 42rpx;font-weight: bold;">
                                        <text>#</text>{{
                    pickTaskDetail.thirdOrderIndex
                }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="pickTaskDetail.orderRemark"
                        style="background-color: #dff3ff;line-height: 35rpx;padding: 18rpx 24rpx;font-size: 28rpx;margin: 10rpx 0;border-radius: 0px 0px 16rpx 16rpx;">
                        <text>备注：</text>{{ pickTaskDetail.orderRemark }}
                    </view>
                    <view class="" style="font-size: 28rpx;flex: 1;">
                        订单金额<text class="bold co-red"> {{ formatPrice(pickTaskDetail.orderAmount) }}</text>
                        商品 <text class="bold">{{ pickTaskDetail.goodsNum }}件</text> 重<text class="bold">{{
                    pickTaskDetail.goodsWeight }}kg</text>
                    </view>
                </view>
            </view>
            <Title type="复核" />
            <scroll-view scroll-y="true" style="width: 100%;box-sizing: border-box;overflow-y: scroll;">
                <PickGoodsList :scope="pickTaskDetail" type="复核" :goodsList="goodsList"  v-if="goodsList?.length"/>
                <view v-else>暂无数据</view>
            </scroll-view>
        </view>
        <view v-else class="nodata" style="background-color: RGBA(255,255,255,0);">
            <image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
            <view class="color-888 font-size-28">暂无数据</view>
        </view>
        <view class="bottom" v-if="(pickTaskDetail?.reviewTaskStatus == '1')">
            <eui-button type="max" title="确认复核" @click="pickingComplete" style="width: 220rpx;" />
        </view>
        <eui-popup ref="pickTaskGdsPopup" background-color="#f8f8f8" type="bottom" :mask-click="false">
            <view class="popup-title flex just-between">
                <view style="font-weight: bold;">
                    拣货
                </view>
                <bcm-close-btn @click="closePickTaskGdsPopup" />
            </view>
            <view
                style="padding-left: 30rpx;color: #000;background-color:#fff;box-sizing: border-box;padding-top:24rpx;font-size: 32rpx; line-height: 32rpx;">

            </view>
        </eui-popup>
    </eui-background>
</template>
<script setup lang="js">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import Title from '../PickTask/components/Title';
import { getBcmDictName, getBcmDictItem, formatPrice } from '../../../hooks/bcmUseUntils';
import PickGoodsList from '../PickTask/components/PickGoodsList';
import service from '../../../common/service';
import { bcmRequest, getBcmUrl } from '../../../hooks/bcmServices';
import BcmCloseBtn from '../components/BcmCloseBtn'

const bcmUrl = getBcmUrl()
const code = ref('')
const pickTaskNo = ref('')
const BillId = ref('')
const StoreCode = ref('')
const pickTaskDetail = ref()
const height = ref('')
const pickTaskGdsPopup = ref(false)
const goodsList = ref([])

const getData = async (id, storeCode) => {
    service.enjoyShowLoading('正在加载...')
    const param = {
        IsNotPage: true,
        QueryCountFlag: false,
        WhereList: [
            { c_col: "reviewTaskNo", c_oper: "等于", c_value: id },
            { c_col: "storeCode", c_oper: "等于", c_value: storeCode }
        ]
    }
    const response = await bcmRequest(bcmUrl.orderApi, '复核任务表', 'QueryReviewTaskList', param);
    service.enjoyHideLoading();
    if(response.ReturnObject?.length){
        pickTaskDetail.value = response.ReturnObject[0];
        let list = []
        response.ReturnObject[0]?.bcmReviewTaskDetailList?.map(v => {
            v.num = v.goodsNum - v.stockoutNum;
            list.push(v)
        })
        console.log(response.ReturnObject[0], 'response.ReturnObject[0]')
        goodsList.value = list;
    }
}

const searchConfirm = (e) => {
    getData(e.value, StoreCode.value)
}

const closePickTaskGdsPopup = () => {
    // filterGdsItem.value = null;
    pickTaskGdsPopup.value.close();
}

const clickScanLeft = () => {
    uni.scanCode({
        success: async function (res) {
            if (res.result != '' && res.result != undefined && res.result != null) {
                pickTaskNo.value = res.result;
                await searchConfirm({
                    value: res.result
                });
            }
        }
    });
}

const clickGdsScanLeft = () => {
    uni.scanCode({
        success: async function (res) {
            if (res.result != '' && res.result != undefined && res.result != null) {
                code.value = res.result;
                await changeGdsPickNum({
                    value: res.result
                });
            }
        }
    });
}
const clearSearch = (type) => {
    if (type == 'gds') {
        code.value = '';
    } else {
        pickTaskNo.value = '';
        getData(BillId.value, StoreCode.value)
    }

}

const changeGdsPickNum = (e) => {
    let goodsItem = goodsList.value.find(v => v.goodsBarcode == e.value || v.goodsCode == e.value);
    if (!!goodsItem) {
        goodsList.value.forEach(v => {
            v.reviewStatus = '1'
        })
    }

}

const pickingComplete = () => {
    uni.showModal({
        title: '订单复核确认',
        content: goodsList.value?.filter(v => !!v.stockoutNum).length ? '订单存在缺货商品，是否自动退款？' : '是否确认完成复核？',
        success: function (res) {
            if (res.confirm) {
                pickTaskPickingComplete()
            }
        }
    })
}

const pickTaskPickingComplete = async () => {
    service.enjoyShowLoading('正在加载...')
    const { bcmReviewTaskDetailList, reviewTaskId, reviewTaskNo } = pickTaskDetail.value
    let ObjectData = {
        reviewGoodsDetailList: [],
        reviewTaskId,
        reviewTaskNo
    }
    bcmReviewTaskDetailList?.map((v, i) => {
        const { goodsBarcode, goodsCode, goodsNum, stockoutNum, reviewTaskDetailId } = v;
        ObjectData.reviewGoodsDetailList.push({
            goodsBarcode,
            goodsCode,
            pickNum: goodsNum - stockoutNum,
            stockoutNum,
            reviewTaskDetailId
        })
    })
    const response = await bcmRequest(bcmUrl.orderApi, '复核任务表', 'OrderConfirmReview', ObjectData);
    service.enjoyHideLoading();
    uni.navigateBack()
}

onMounted(() => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数 
            let info = uni.createSelectorQuery().select(".navigation");
            info.boundingClientRect(function (data) { //data - 各种参数
                height.value = res.windowHeight - data.height - 48 - 60 - 97;
            }).exec()
        }
    });
})

onLoad(async (options) => {
    let id = options?.id, storeCode = options?.storeCode;
    BillId.value = id;
    StoreCode.value = storeCode;
    getData(id, storeCode)
})
</script>
<style lang="scss">
@import "../common/common.css";

.content {
    padding: 0;
    background-color: #fff;
}

.content-img {
    height: 100%;
    background: #fff;
    background-repeat: no-repeat;
    background-size: 100% 150px;
}

.navigation {
    flex: 0 0 auto;
    // background: linear-gradient( 180deg, #4595F9 0%, rgba(14,219,229,0) 100%);
}

.footer {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bottom {
    display: flow-root;
    height: 70rpx;
    // border-bottom-left-radius: $uni-border-radius-lg;
    // border-bottom-right-radius: $uni-border-radius-lg;
    padding: 16rpx 40rpx;
    text-align: right;
    background: #fff;
}

.popup-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background-color: #fff;

    .popup-title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100rpx;
        padding-right: 36rpx;
        padding-left: 30rpx;
        font-size: 33rpx;
        line-height: 100rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }
}

.picktag {
    width: 170rpx;
    height: 54rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 54rpx;
    text-align: center;
    background: #4546f9;
    border-radius: 0rpx 12rpx 0rpx 12rpx;
}
</style>